<template>
  <!-- 班次设置 -->
  <div class="shift-manage route-page">
    <a-card class="route-content" body-style="padding: 12px" title="排班组设置">
      <a-table
        :dataSource="dataList"
        :columns="columns"
        rowKey="id"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #title>
          <a-row type="flex" justify="space-between">
            <a-col>
              <a-input-search
                v-model:value="group_name"
                placeholder="搜索排班组名称"
                :allowClear="true"
                @search="getDataList(true)"
              />
            </a-col>
            <a-col>
              <a-button type="primary" @click="addShiftGroup()">
                <template #icon>
                  <PlusOutlined />
                </template>
                新建排班组
              </a-button>
            </a-col>
          </a-row>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'shift_type'">
            <span> {{ text == 0 ? "固定排班" : "排班制" }} </span>
          </template>
          <template v-if="column.key === 'time_detail'">
            <template v-if="text && text.length">
              <div v-for="item of text" :key="item.id">
                <span> {{ item.shift_name }}：</span>
                <template v-if="item.time_detail && item.time_detail.length">
                  <template
                    v-for="(item2, index) of item.time_detail"
                    :key="index"
                  >
                    <span v-if="item2.startNextDay">次日</span>
                    <span>{{ item2.start }}</span>
                    ~
                    <span v-if="item2.endNextDay">次日</span>
                    <span>{{ item2.end }}</span>
                    <span v-if="index < item.time_detail.length - 1">；</span>
                  </template>
                </template>
              </div>
            </template>
          </template>
          <template v-if="column.key === 'admin_user'">
            <a-space>
              <a-tag v-for="item of text" :key="item.uid">
                {{ item.realname }}
              </a-tag>
            </a-space>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="addShiftGroup(text)"> 编辑 </a-button>
            <a-button
              type="link"
              v-if="record.shift_type == 1"
              @click="dealShift(text)"
            >
              排班
            </a-button>
            <a-button type="link" danger @click="removeShiftGroup(record)">
              删除
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, toRaw } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "../../../common/utils/request";
import utils from "../../../common/utils/utils";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "companyShiftGroup",
  components: { PlusOutlined },
  setup() {
    const $router = useRouter();

    const state = reactive({
      dataList: [],
      page: 1,
      pageSize: 20,
      total: 0,
      group_name: "",
      time_sort: "desc", // asc 正序，desc倒序
    });

    const addShiftGroup = (id) => {
      let query = {};
      if (id) {
        query.id = id;
      }
      $router.push({
        name: "addCompanyShiftGroup",
        query,
      });
    };
    const addShiftSuccess = () => {
      state.addVisible = false;
      getDataList(true);
    };
    const dealShift = (id) => {
      $router.push({
        name: "ShiftArrange",
        query: { id },
      });
    };

    const removeShiftGroup = (record) => {
      utils.modalConfirm({
        content: `确认删除排版组“${record.group_name}”吗？`,
        okType: "danger",
        onOk: () => {
          request
            .del("/org", "/shift/group", {
              id: record.id,
              needMsg: true,
            })
            .then((res) => {
              message.success(res.msg || "删除成功！");
              getDataList();
            });
        },
      });
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showTotal: (total) => `共${total}条`,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager, filter, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      state.time_sort = sorter.order == "descend" ? "desc" : "asc";
      getDataList();
    };

    const getDataList = (init = false) => {
      if (init) {
        state.page = 1;
      }
      const params = {
        page: state.page,
        pageSize: state.pageSize,
        time_sort: state.time_sort,
      };
      if (state.group_name) {
        params.group_name = state.group_name;
      }
      request.get("/org", "/shift/group/list", params).then((res) => {
        state.dataList = res.list.map((item) => {
          if (item.time_detail && item.time_detail.shift_list) {
            item.time_detail = item.time_detail.shift_list.map((item2) => {
              item2.time_detail = utils.getShiftTimeDetail(item2.time_detail);
              return item2;
            });
          }
          return item;
        });
        console.log("-------------------state.dataList", toRaw(state.dataList));
        state.total = res.total;
      });
    };

    const init = () => {
      getDataList(true);
    };
    init();
    return {
      columns,
      pagination,
      ...toRefs(state),
      addShiftGroup,
      addShiftSuccess,
      getDataList,
      handleTableChange,
      removeShiftGroup,
      dealShift,
    };
  },
});

const columns = [
  {
    title: "排班组名称",
    dataIndex: "group_name",
    key: "group_name",
  },
  {
    title: "类型",
    dataIndex: "shift_type",
    key: "shift_type",
  },
  {
    title: "考勤时间",
    dataIndex: "time_detail",
    key: "time_detail",
  },
  // {
  //   title: "人数",
  //   dataIndex: "user_count",
  //   key: "user_count",
  // },
  {
    title: "主负责人",
    dataIndex: "admin_user",
    key: "admin_user",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
  },
];
</script>
<style lang="less" scoped>
.shift-manage {
  :deep(.ant-table-title) {
    padding: 8px 0;
  }
  :deep(.ant-card-head-title) {
    padding: 15px 0;
  }
}
</style>
